<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" type="text/css" href="${path}/static/front/css/reset.css">
<link rel="stylesheet" type="text/css" href="${path}/static/front/css/main.css">
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
			
			<!-- 已登录 session作用域 user不为空 -->
 				<c:if test="${not empty user}">
					<div class="login_btn fl" >
						欢迎您：<em>${user.username}</em>
					</div>
					
					<div class="user_link fl">
						<span>|</span>
						<a href="user_center_info.html">用户中心</a>
						<span>|</span>
						<a href="${path}/cart/getCartListJsp.shtml?userId=${user.id}">我的购物车</a>
						<span>|</span>
						<a href="user_center_order.html">我的订单</a>
						<span>|</span>
						<a onclick="loginout()" href="#">退出登录</a>
					</div>
				</c:if>
				
			<!-- 未登录 session作用域 use为空 -->
				<c:if test="${empty user}">
   					<div class="login_btn fl">
						<a href="#" onclick="login()">登录</a>
						<span>|</span>
						<a href="register.html">注册</a>
					</div>  
				</c:if>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="${path}/index.shtml" class="logo fl"><img src="${path}/static/front/images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="total_count">全部商品<em>${cartList.size()}</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">名称</li>
		<li class="col02">价格</li>
		<li class="col03">库存</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
	
<!-- 购物里的所有商品 -->

	<c:forEach items="${cartList}" var="cart">
	
		<ul class="cart_list_td clearfix" id="cartItem${cart.id}">
			
			<!-- checked==1 说明选中：checked="true" -->
			<c:if test="${cart.checked==1}"> 
				<li class="col01"><input id="checkbox${cart.id}" onclick="updateCartItemCheckStatusByCartId(${cart.id})" type="checkbox" name="" checked="true"></li>
			</c:if>
			<!-- checked==0 说明没选中：checked=""不写！默认不写是false  -->
			<c:if test="${cart.checked==0}">
				<li class="col01"><input id="checkbox${cart.id}" onclick="updateCartItemCheckStatusByCartId(${cart.id})" type="checkbox" name=""></li>
			</c:if>
			
			<li class="col02"><img src="${cart.product.mainImageFullUrl}<%-- /pic/${cart.product.mainImage} --%>"></li>
			<li class="col03" >${cart.product.name}<br></li>
			<li class="col04">${cart.product.price}元</li>
			<li class="col05">${cart.product.stock}</li>
			<li class="col06">
				<div class="num_add">
					<a onclick="updateCartItemQuantityByCartId(${cart.id} ,1 ,${cart.product.price})" href="#" class="add fl">+</a>
					<input id="quantity${cart.id}" type="text" class="num_show fl" id="buyCount" value="${cart.quantity}">	
					<a onclick="updateCartItemQuantityByCartId(${cart.id} ,-1 ,${cart.product.price})" href="#" class="minus fl">-</a>	
				</div>
			</li>
			<li class="col07" id="cartItemTotalPrice${cart.id}"><%-- ${cart.product.price * cart.quantity}元 --%></li> <!-- 商品单价  * 商品数量 -->
			<li class="col08"><a href="#" onclick="deleteCartItemByCartId(${cart.id})">删除</a></li>
		</ul>
		
	</c:forEach>



	

	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em><span id="totalPrice">42.60</span></em><br>共计<b>2</b>件商品</li>
		<li class="col04"><a href="${path}/order/getOrderConfirmJsp.shtml"place_order.html">去结算</a></li>
	</ul>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
   <script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		$(function() {
			refreshTotalPrice();
		});
		
		/* 2020.03.31    刷新总价 */
		function refreshTotalPrice() {
			// 当页面加载完了，计算选中商品的总价格
			//$("input[type=checkbox]:checked");
			var checkboxs = $("input[name=selectCheckbox]:checked");
			var totalPrice = 0;
			$(checkboxs).each(function() {
				// this代表当前正在遍历的checkbox的js dom对象
				// checkbox的id="checkbox123"
				// this.id     checkbox123
				// substr   123
				var checkboxId = this.id;
				var cartId = checkboxId.substr("checkbox".length);
				var cartItemTotalPrice = $("#cartItemTotalPrice" + cartId).html();
				totalPrice += parseFloat(cartItemTotalPrice);
			});
			$("#totalPrice").html(totalPrice);
		}

	/* 2020.03.30 删除 购物车的商品（deleteCartItemByCartId）  */
	function deleteCartItemByCartId(cartId) {
		layer.confirm("确定删除吗？", function() {
			$.post(
				"${path}/cart/deleteCartItemByCartId.shtml",		
				{"cartId":cartId},
				function(result) {
					if (result.success) { 
						// 如果 删除成功
							//1.mylayer弹窗 提示删除成功
							//2.jQuery .remove()： 移除 (购物车jsp页面里)  那一条记录，，by id="cartItem${cart.id}" item:每一条商品(cart购物车里)
							//3.刷新
						mylayer.successMsg(result.msg);
						$("#cartItem" + cartId).remove();
						refreshTotalPrice();
					} else {
						mylayer.errorMsg(result.msg);
					}//else
				},//function(result)
				"json"
			);//post
		});//layer.confirm
	}//function deleteByCartId
	
	/* 4. 2020.03.30  修改 购物车内 商品的数量（update cart表的quantity字段）    */
 	function updateCartItemQuantityByCartId(cartId ,addOrSub ,productPrice) {
		$.post(
			"${path}/cart/updateCartItemQuantityByCartId.shtml",
			{"cartId":cartId,"addOrSub":addOrSub},
			function(result) {
				if (result.success) {
					// 更新成功
						//1.提示 更新成功
						//2.更新 quantity值
						//3. 更新 小计  每个商品的总价格
					/* 1.提示  修改成功 */
					mylayer.successMsg(result.msg);
					
					
					/* 2.更新 quantity值 */
					var quantity = parseInt($("#quantity" + cartId).val());
					quantity = quantity + addOrSub;
					$("#quantity" + cartId).val(quantity);
					
					/* 3.更新 小计（当前item的）：商品数量*商品价格的值 */
					var totalPrice = quantity * productPrice;
					$("#cartItemTotalPrice" + cartId).html(totalPrice + "元");
					
					/* 4.刷新 */
					
					
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			"json"
		)
	} 
	
	/* 2020.03.31 更新多选框         0未选中 ，1选中 */
	function updateCartItemCheckStatusByCartId(cartId) {
		// prop:property
		
		/* 
			0.复选框 被点击后 进入点击事件
			1.获取 复选框当前状态， true选中，false未选中。然后 赋值给1个变量checked。
			2.if(true checked=1)(false checked=0)
			3.发ajax到后台，，更新chencked, 根据cartId
		*/
		var checked = $("#checkbox" + cartId).prop("checked");// true false // prop: 获取checkbox的true,false
		if(checked) {
			checked = 1;
		} else {
			checked = 0;
		}
		
		$.post(
			"${path}/cart/updateCartItemCheckStatusByCartId.shtml",
			{"cartId":cartId,"checked":checked},
			function(result) {
				if(result.success) {
					mylayer.successMsg(result.msg);
					refreshTotalPrice();
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			"json"
		);
	}
	
/* 2020.04.05 登录&退出登录 */	
	/* 点击  右上方 的 登录 */
	function login() {
		layer.open({
			type : 2,
			tile : "添加",
			area : ["500px", "450px"],
			content : "${path}/user/getLoginJsp.shtml"
		});
	}

	/* 退出登录 */
		function loginout() {
			layer.confirm("确定退出？", function() {
				$.post(
					"${path}/user/loginout.shtml",		
					
					function(result) {
						if (result.success) { 
							// 如果 删除成功
								//1.mylayer弹窗 提示删除成功
								//2.jQuery .remove()： 移除 (购物车jsp页面里)  那一条记录
							mylayer.successUrl(result.msg,"http://localhost:8080/_0318_mall/index.shtml");
							
						} else {
							mylayer.errorMsg(result.msg);
						}//else
					},//function(result)
					"json"
				);//post
			});//layer.confirm
		}//loginout()
	
	
	</script>
	
</body>
</html>